<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-05-28 15:53:08
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-12-29 11:39:57
-->
<template>
  <div class="container">
    <ul>
      <li v-for="(item, index) in funList" :key="index">
        <nuxt-link :to="{ name: item.name }">
          <el-tag>{{ item.title }}</el-tag>
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      funList: [
        {
          name: "plupload",
          title: "分片上传"
        },
        {
          name: "animateNumber",
          title: "数字动画"
        },
        {
          name: "echartsPie",
          title: "饼状图"
        },
        {
          name: "histogram",
          title: "柱状图"
        },
        {
          name: "skeleton",
          title: "骨架"
        },
        {
          name: "upgradeUpload",
          title: "多文件分片上传"
        },
        {
          name: "dialogPage",
          title: "弹窗拖拽"
        },
        {
          name: "steps",
          title: "步骤条"
        },
        {
          name: "upgradeUpload",
          title: "多文件分片上传"
        },
        {
          name: "transferTree",
          title: "穿梭框 + tree"
        },
        {
          name: "treeDemo",
          title: "优化tree样式"
        },
        {
          name: "transferChange",
          title: "transfer + tree进阶"
        },
        {
          name: "tabledemo",
          title: "tabledemo样式"
        },
        {
          name: "codeDiff",
          title: "对比工具"
        },
        {
          name: "quarterTime",
          title: "季度时间"
        },
        {
          name: "tableCell",
          title: "布局调整"
        },
        {
          name: "dragpanel",
          title: "div拖拽"
        },
        {
          name: "text",
          title: "日志样式"
        },
        {
          name: "filterTree",
          title: "树过滤"
        },
        {
          name: "spreadJs",
          title: "spreadJs"
        },
        {
          name: "spreadUpload",
          title: "spreadUpload"
        },
        {
          name: "monitorPage",
          title: "monitorPage"
        },
        {
          name: "mergeTable",
          title: "table表格合并"
        },
        {
          name: "quarterPicker",
          title: "季度年份"
        },
        {
          name: "transfer",
          title: "穿梭框+分页"
        },
        {
          name: "watermark",
          title: "水印"
        },
        {
          name: "weatherReport",
          title: "天气预报"
        },
        {
          name: "drageAble",
          title: "div拖拽排序"
        },
        {
          name: "parallax",
          title: "css滚动视差"
        },
        {
          name: 'worldMap',
          title: '世界地图'
        },
        {
          name: 'swiperText',
          title: '滚动文本'
        },
        {
          name: 'paginatedVirtualTree',
          title: '懒加载分页虚拟数'
        },
        {
          name: "testPage",
          title: "测试页面"
        }
      ]
    };
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.container {
  margin: 0 auto;
  width: 1280px;
  padding: 20px;
  min-height: 100vh;
  font-size: 24px;
  box-sizing: border-box;

  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    li {
      margin: 10px;
    }
  }
}
</style>